<template>
  <view class="container">
    <view class="form">
      <view class="form-item">
        <view class="label">收藏夹图片</view>
        <view class="image-upload" @click="uploadImg">
          <image
            :src="folderImgUrl ? folderImgUrl : '/static/image/addicon.png'"
            mode="aspectFill"
            class="upload-image"
          ></image>
        </view>
      </view>

      <view class="form-item">
        <view class="label">收藏夹名称</view>
        <input
          v-model="folderTitle"
          type="text"
          placeholder="请输入收藏夹名称"
          class="input"
        />
      </view>
    </view>

    <view class="submit-btn" @click="submit">确认</view>
  </view>
</template>

<script>
import commonMixin from "@/mixin/commonMinxin";

export default {
  mixins: [commonMixin],
  data() {
    return {
      folderTitle: "",
      folderImgUrl: "",
    };
  },
  methods: {
    submit() {
      if (this.folderTitle == "") {
        uni.showToast({
          title: "收藏夹名称和图片都是必传",
          icon: "none",
          duration: 2000,
        });
        return;
      }
      let data = {
        folderTitle: this.folderTitle,
        folderImgUrl: this.folderImgUrl,
        authorId: uni.getStorageSync("userId"),
      };
      uni.app.post("/blog/action/starFolder", data, "json", "", (res) => {
        uni.showToast({
          title: "新增成功",
          icon: "none",
          duration: 2000,
        });
        switch (uni.getSystemInfoSync().platform) {
          case "android":
            window.AndroidBridge.backEvent();
            console.log("运行Android上");
            break;
          case "ios":
            window.webkit.messageHandlers.backEvent.postMessage({});
            break;
          default:
            console.log("运行在开发者工具上");
            break;
        }
      });
    },
    uploadImg() {
      let that = this;
      uni.chooseImage({
        count: 1,
        sizeType: ["compressed"],
        sourceType: ["album", "camera"],
        success: (res) => {
          var file = res.tempFiles[0];
          if (file.size > 2 * (1024 * 1024)) {
            uni.app.msg("图片尺寸过大，已忽略");
            return;
          }
          console.log(file);
          //拿到数据后上传
          uni.uploadFile({
            url: this.$uploadUrl,
            filePath: file.path,
            name: file.fileName,
            formData: {
              fileSavePath: "/background",
            },
            success: (uploadRes) => {
              try {
                uploadRes = JSON.parse(uploadRes.data);
                console.log(uploadRes, "uploadRes");
                that.folderImgUrl = uploadRes.data;
                return;
                if (uploadRes.status != "ok") {
                  uni.showToast({
                    title: "上传失败 : " + uploadRes.data,
                    icon: "none",
                  });
                } else {
                  //上传图片成功
                  console.log(uploadRes.result.fileId);
                  uni.app.post(
                    "/auth/updateAuthorBackGround",
                    {
                      fileId: uploadRes.result.fileId,
                    },
                    "form",
                    "",
                    (res) => {
                      this.folderImgUrl = res.data;
                    },
                  );
                }
              } catch (e) {
                console.error(e);
              }
            },
            fail: (e) => {
              uni.showToast({
                title: "上传失败，请点击图片重试",
                icon: "none",
              });
            },
          });
        },
        complete: function () {},
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  padding: 40rpx;
  background-color: #f5f5f5;
  min-height: 100vh;
}

.header {
  text-align: center;
  margin-bottom: 60rpx;

  .title {
    font-size: 36rpx;
    font-weight: 600;
    color: #333;
  }
}

.form {
  background: #fff;
  border-radius: 20rpx;
  padding: 40rpx;
  margin-bottom: 60rpx;

  .form-item {
    margin-bottom: 40rpx;

    &:last-child {
      margin-bottom: 0;
    }

    .label {
      font-size: 32rpx;
      color: #333;
      margin-bottom: 20rpx;
      font-weight: 500;
    }

    .image-upload {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 160rpx;
      height: 160rpx;
      border: 2rpx dashed #ddd;
      border-radius: 16rpx;
      background-color: #fafafa;

      .upload-image {
        width: 80rpx;
        height: 80rpx;
      }
    }

    .input {
      width: 100%;
      height: 80rpx;
      border: 2rpx solid #eee;
      border-radius: 12rpx;
      padding: 0 20rpx;
      font-size: 28rpx;
      background-color: #fafafa;

      &:focus {
        border-color: #d9f700;
      }
    }
  }
}

.submit-btn {
  width: 100%;
  height: 88rpx;
  background: #d9f700;
  border-radius: 44rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 32rpx;
  font-weight: 600;
  color: #333;
}
</style>
